<template>
  <div style="margin: 10px;">
    <div>
        <el-row :gutter="20">
            <el-col :span="14">
                <el-card style="height: 350px;">
                    <div class="title">
                        告警趋势分析(过去30天)
                    </div>
                    <div class="echartsCss" ref="echartsbox1">
                        <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="10">
                <el-card style="height: 350px;">
                    <div class="title">
                        告警分区排名(top 5)(过去30天)
                    </div>
                    <el-table
                        style="width: 100%">
                        <el-table-column
                            prop="date"
                            label="告警排行"
                            align="center"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="告警分区"
                            align="center"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="address"
                            align="center"
                            label="告警次数">
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
    </div>
    <div>
        <el-row :gutter="20">
            <el-col :span="14">
                <el-card style="margin-top: 10px;height: 350px;">
                    <div class="title">
                        告警时段分析(过去24小时平均)
                    </div>
                    <div class="echartsCss" ref="echartsbox2">
                        <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="10">
                <el-card style="margin-top: 10px;height: 350px;">
                    <div class="title">
                        告警类型占比(过去30天)
                    </div>
                    <div style="float: right;font-size: 16px;font-weight: bold;margin-right: 50px;">告警总数&nbsp&nbsp4179</div>
                    <div class="echartsCss" ref="echartsbox3">
                        <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  created () {
  },
  mounted () {
    this.qvshiEcharts()
    this.shiduanEcharts()
    this.leixingEcharts()
  },
  methods: {
    qvshiEcharts(){
        var echartsbox1=this.$refs.echartsbox1;
		  let myChart = this.$echarts.getInstanceByDom(
		    this.$refs.echartsbox1
		  );
		  if (myChart == null) {
		    myChart = this.$echarts.init(echartsbox1);
		  }
		  
		  var option;
          

        option = {
            calculable: true,
            legend: {
                // top: '50%',
                textStyle: {
                    color: '#4F4F4F'   //字体颜色
                }
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['01-02', '01-03', '01-04', '01-05', '01-06','01-07', '01-08', '01-09', '01-10', '01-11',],
                    axisLine: {   //x轴线的颜色以及宽度
                        show: true,   //是否显示X轴
                        lineStyle: {
                            color: "#4F4F4F",
                        }
                    },
                    axisTick: {
                        //是否显示刻度线
                        show: false
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisTick: {
                        //y轴刻度线
                        show: false
                    },
                    nameLocation:'end',//设置Y轴位置
                    name:'(次)',//设置Y轴单位
                    axisLine: {
                        show: true, // Y轴
                        lineStyle: {
                            color: "#4F4F4F",
                        }
                    },
                    splitLine: { // 表格里面Y轴线条
                    show: true,
                    }
                }
            ],
            // 整体大小
            grid: {
                left: '3%',
                right: '4%',
                top: '10%',
                bottom: '5%',
                containLabel: true
            },
            series: [
                {
                    barWidth: 12,//柱子宽度
                    type: 'bar',
                    data: [
                    0,0,0, 28, 70, 175, 182, 48
                    ],
                    itemStyle: {
                        //颜色样式部分
                        normal: {
                            barBorderRadius: [20, 20, 0, 0],  //圆角[上左，上右，下右，下左] 
                            label: {
                                // show: true, //开启数字显示         
                                // position: 'top', //在上方显示数字          
                                textStyle: { //数值样式          
                                    color: '#474646',   //字体颜色
                                    fontSize: 10        //字体大小
                                }
                            },
                            //   自定义柱状图颜色渐变
                            color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                { offset: 0, color: "#017CE4" },
                                { offset: 1, color: "#249EFD" },
                            ]),
                        }
                    }
                }
            ]
        };
        option && myChart.setOption(option);
    },
    shiduanEcharts(){
        var echartsbox2=this.$refs.echartsbox2;
		  let myChart = this.$echarts.getInstanceByDom(
		    this.$refs.echartsbox2
		  );
		  if (myChart == null) {
		    myChart = this.$echarts.init(echartsbox2);
		  }
		  
		  var option;
          option = {
            title: {
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
                }
            },
            legend: {
                data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            },
            toolbox: {
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                type: 'category',
                boundaryGap: false,
                data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00','14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
                }
            ],
            yAxis: [
                {
                type: 'value'
                }
            ],
            series: [
                {
                // name: 'Search Engine',
                type: 'line',
                smooth: true,
                stack: 'Total',
                // label: {
                //   show: true,
                //   position: 'top'
                // },
                areaStyle: {
                    opacity: 0.8,
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: '#ccffff'
                    },
                    {
                        offset: 0.5,
                        color: '#ccffff'
                    },
                    {
                        offset: 1,
                        color: '#ffffff'
                    }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: [0,0,0,0,0,0,0, 350, 240, 380,0,0,0,0,0,0,0,0,0,0,0,0,0, 846]
                }
            ]
        };
        option && myChart.setOption(option);
    },
    leixingEcharts(){
        var echartsbox3=this.$refs.echartsbox3;
		  let myChart = this.$echarts.getInstanceByDom(
		    this.$refs.echartsbox3
		  );
		  if (myChart == null) {
		    myChart = this.$echarts.init(echartsbox3);
		  }
		  
		  var option; 
        option = {
            color:['#99ccff','#9999ff','#66ccff'],
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                top: '10%',
                formatter: function(name) {
                        // 获取legend显示内容
                        let data = option.series[0].data;
                        let total = 0;
                        let tarValue = 0;
                        for (let i = 0, l = data.length; i < l; i++) {
                            total += data[i].value;
                            if (data[i].name == name) {
                                tarValue = data[i].value;
                            }
                        }
                        let p = (tarValue / total * 100).toFixed(2);
                        return name  + ' '+'   ' + tarValue +'    '+ ' ';
                    },
                left: '10'
            },
            series: [
                {
                type: 'pie',
                radius: ['25%', '80%'],
                avoidLabelOverlap: false,
                roseType: 'area',
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                    show: true,
                    fontSize: 20,
                    fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 2603, name: '照明场景' },
                    { value: 756, name: '低温警告' },
                    { value: 756, name: '高温告警' }
                ],
                }
            ]
        };
        option && myChart.setOption(option); 
    }
  },
}
</script>
<style lang="scss" scoped>
.title{
    font-weight: bold;
    padding: 10px;
    font-size: 14px;
}
.echartsCss{
    width: 100%;
    height: 280px;
}
</style>
